<script setup lang="ts">
import { onMounted, ref, watch, reactive } from 'vue'

const props = defineProps({
  time: Number
})

// 获取横条上半dom元素
const dom_center_line_height = ref<HTMLElement>()
const centerLineHeight = ref<string>('')

// 获取竖条左半dom元素
const dom_column = ref<HTMLElement>()
const columnLineWidth = ref<string>('')

onMounted((): void => {
  // 设置dom元素的边框宽度
  const w: number = document.body.clientWidth
  // 横
  centerLineHeight.value = (dom_center_line_height.value!.offsetHeight / (w / 750)) + 'rem'

  // 竖
  columnLineWidth.value = (dom_column.value!.offsetWidth / (w / 750)) + 'rem'

})

// 初始化颜色条状态
const numberStatus = reactive({
  left_top_line: true,
  left_bottom_line: true,
  right_top_line: true,
  right_bottom_line: true,
  top_line: true,
  center_line: true,
  bottom_line: true
})
// const left_top_line = ref<boolean>(true)
// const left_bottom_line = ref<boolean>(true)
// const right_top_line = ref<boolean>(true)
// const right_bottom_line = ref<boolean>(true)
// const top_line = ref<boolean>(true)
// const center_line = ref<boolean>(true)
// const bottom_line = ref<boolean>(true)

// 改变颜色条颜色
const changeLineColor = (x: number): void => {
  switch (x) {
    case 0:
      numberStatus.left_top_line = numberStatus.left_bottom_line = numberStatus.right_top_line = numberStatus.right_bottom_line = numberStatus.top_line = numberStatus.bottom_line = true
      numberStatus.center_line = false
      break;

    case 1:
      numberStatus.right_top_line = numberStatus.right_bottom_line = true
      numberStatus.center_line = numberStatus.left_top_line = numberStatus.left_bottom_line = numberStatus.top_line = numberStatus.bottom_line = false
      break;

    case 2:
      numberStatus.right_top_line = numberStatus.center_line = numberStatus.left_bottom_line = numberStatus.bottom_line = numberStatus.top_line = true
      numberStatus.right_bottom_line = numberStatus.left_top_line = false
      break;

    case 3:
      numberStatus.right_bottom_line = numberStatus.right_top_line = numberStatus.center_line = numberStatus.bottom_line = numberStatus.top_line = true
      numberStatus.left_top_line = numberStatus.left_bottom_line = false
      break;

    case 4:
      numberStatus.left_top_line = numberStatus.right_bottom_line = numberStatus.right_top_line = numberStatus.center_line = true
      numberStatus.left_bottom_line = numberStatus.top_line = numberStatus.bottom_line = false
      break;

    case 5:
      numberStatus.right_bottom_line = numberStatus.left_top_line = numberStatus.center_line = numberStatus.bottom_line = numberStatus.top_line = true
      numberStatus.right_top_line = numberStatus.left_bottom_line = false
      break;

    case 6:
      numberStatus.left_bottom_line = numberStatus.right_bottom_line = numberStatus.left_top_line = numberStatus.center_line = numberStatus.bottom_line = numberStatus.top_line = true
      numberStatus.right_top_line = false
      break;

    case 7:
      numberStatus.right_top_line = numberStatus.right_bottom_line = numberStatus.top_line = true
      numberStatus.center_line = numberStatus.left_top_line = numberStatus.left_bottom_line = numberStatus.bottom_line = false
      break;

    case 8:
      numberStatus.left_top_line = numberStatus.left_bottom_line = numberStatus.right_top_line = numberStatus.right_bottom_line = numberStatus.top_line = numberStatus.bottom_line = numberStatus.center_line = true
      break;

    default:
      numberStatus.left_top_line = numberStatus.right_top_line = numberStatus.right_bottom_line = numberStatus.top_line = numberStatus.bottom_line = numberStatus.center_line = true
      numberStatus.left_bottom_line = false
      break;
  }
}

watch((): number => props.time || 0, (newTime) => {
  changeLineColor(newTime)
  // console.log(newTime);

}, {
  immediate: true
})


</script>

<template>
  <div class="digital">
    <div class="box">
      <section>
        <!-- 数字左边上下 -->
        <div class="column" :style="{ height: `calc(100% - (${centerLineHeight} * 2))`, marginTop: centerLineHeight }">
          <div>
            <span ref="dom_column" class="one"
              :style="{ borderWidth: columnLineWidth, borderLeftWidth: 0, borderRightColor: numberStatus.left_top_line ? '#0f0' : 'transparent' }"></span>
            <span class="two"
              :style="{ borderWidth: columnLineWidth, borderRightWidth: 0, borderLeftColor: numberStatus.left_top_line ? '#0f0' : 'transparent' }"></span>
          </div>
          <div>
            <span class="one"
              :style="{ borderWidth: columnLineWidth, borderLeftWidth: 0, borderRightColor: numberStatus.left_bottom_line ? '#0f0' : 'transparent' }"></span>
            <span class="two"
              :style="{ borderWidth: columnLineWidth, borderRightWidth: 0, borderLeftColor: numberStatus.left_bottom_line ? '#0f0' : 'transparent' }"></span>
          </div>
        </div>

        <!-- 数字右边上下 -->
        <div class="column" :style="{ height: `calc(100% - (${centerLineHeight} * 2))`, marginTop: centerLineHeight }">
          <div>
            <span class="one"
              :style="{ borderWidth: columnLineWidth, borderLeftWidth: 0, borderRightColor: numberStatus.right_top_line ? '#0f0' : 'transparent' }"></span>
            <span class="two"
              :style="{ borderWidth: columnLineWidth, borderRightWidth: 0, borderLeftColor: numberStatus.right_top_line ? '#0f0' : 'transparent' }"></span>
          </div>
          <div>
            <span class="one"
              :style="{ borderWidth: columnLineWidth, borderLeftWidth: 0, borderRightColor: numberStatus.right_bottom_line ? '#0f0' : 'transparent' }"></span>
            <span class="two"
              :style="{ borderWidth: columnLineWidth, borderRightWidth: 0, borderLeftColor: numberStatus.right_bottom_line ? '#0f0' : 'transparent' }"></span>
          </div>
        </div>

      </section>

      <!-- 数字中间三层 -->
      <div class="center_line">
        <div>
          <span ref="dom_center_line_height" class="one"
            :style="{ borderWidth: centerLineHeight, borderTopWidth: 0, borderBottomColor: numberStatus.top_line ? '#0f0' : 'transparent' }"></span>
          <span class="two"
            :style="{ borderWidth: centerLineHeight, borderBottomWidth: 0, borderTopColor: numberStatus.top_line ? '#0f0' : 'transparent' }"></span>
        </div>
        <div>
          <span class="one"
            :style="{ borderWidth: centerLineHeight, borderTopWidth: 0, borderBottomColor: numberStatus.center_line ? '#0f0' : 'transparent' }"></span>
          <span class="two"
            :style="{ borderWidth: centerLineHeight, borderBottomWidth: 0, borderTopColor: numberStatus.center_line ? '#0f0' : 'transparent' }"></span>
        </div>
        <div>
          <span class="one"
            :style="{ borderWidth: centerLineHeight, borderTopWidth: 0, borderBottomColor: numberStatus.bottom_line ? '#0f0' : 'transparent' }"></span>
          <span class="two"
            :style="{ borderWidth: centerLineHeight, borderBottomWidth: 0, borderTopColor: numberStatus.bottom_line ? '#0f0' : 'transparent' }"></span>
        </div>
      </div>

    </div>

  </div>
</template>

<style lang='scss' scoped>
.digital {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-bottom: 200%;
  // margin-left: 20rem;

  .box {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f0f;

    section {
      display: flex;
      justify-content: space-between;

      width: 100%;
      height: 100%;
      background-color: #ff0;

      .column {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        width: 20%;
        height: 100%;

        div {
          display: flex;
          justify-content: center;
          align-items: center;

          width: 100%;
          height: calc(50% - 4rem);
          // background-color: #0f0;

          span {
            display: block;
            width: 50%;
            height: 100%;
            border: 0px solid transparent;

            &.one {
              border-right-color: #0f0;
            }

            &.two {
              border-left-color: #0f0;
            }
          }
        }
      }
    }

    .center_line {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      div {
        position: relative;

        width: calc(80% - 4rem);
        height: 0;
        padding-bottom: 20%;

        span {
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          width: 100%;
          height: 50%;

          border-left: 1px solid transparent;
          border-right: 1px solid transparent;

          &.one {
            border-bottom-width: 0;
            border-bottom-style: solid;
            border-bottom-color: #0f0;
          }

          &.two {
            top: 50%;
            border-top-width: 0;
            border-top-style: solid;
            border-top-color: #0f0;
          }
        }
      }
    }
  }
}
</style>